<template>
    <main class="koko-demo-main">
      <!-- 数据概览 -->
      <section class="overview-section">
        <h2>数据概览</h2>
        <div class="overview-cards">
          <div class="card">
            <h3>用户总数</h3>
            <p>1,234</p>
          </div>
          <div class="card">
            <h3>订单总数</h3>
            <p>567</p>
          </div>
          <div class="card">
            <h3>销售额</h3>
            <p>¥ 89,000</p>
          </div>
          <div class="card">
            <h3>活跃用户</h3>
            <p>789</p>
          </div>
        </div>
      </section>
  
      <!-- 快速操作 -->
      <section class="quick-actions-section">
        <h2>快速操作</h2>
        <div class="action-buttons">
          <button class="action-button" @click="openAddUserDialog">新增用户</button>
          <button class="action-button">处理订单</button>
          <button class="action-button">生成报表</button>
          <button class="action-button">系统设置</button>
        </div>
      </section>
      
      <!-- 新增用户弹窗 -->
      <el-dialog
        v-model="addUserDialogVisible"
        title="新增用户"
        width="30%"
        :before-close="handleClose"
        destroy-on-close
      >
        <el-form 
          :model="userForm" 
          :rules="rules" 
          ref="userFormRef" 
          label-width="80px" 
          status-icon
          @submit.prevent
        >
          <el-form-item label="姓名" prop="username" required>
            <el-input v-model="userForm.username" placeholder="请输入姓名" maxlength="20" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" required>
            <el-input v-model="userForm.phone" placeholder="请输入手机号" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input-number v-model="userForm.age" :min="1" :max="120" placeholder="请输入年龄"></el-input-number>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="userForm.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
              <el-radio :label="0">保密</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="addUserDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUserForm">确认</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 最近活动 -->
      <section class="recent-activity-section">
        <h2>最近活动</h2>
        <ul class="activity-list">
          <li class="activity-item">
            <span class="activity-time">10:30 AM</span>
            <span class="activity-description">用户 "张三" 创建了新订单。</span>
          </li>
          <li class="activity-item">
            <span class="activity-time">09:45 AM</span>
            <span class="activity-description">用户 "李四" 更新了个人信息。</span>
          </li>
          <li class="activity-item">
            <span class="activity-time">08:15 AM</span>
            <span class="activity-description">系统自动生成了每日报表。</span>
          </li>
        </ul>
      </section>
    </main>
  </template>
  
  <script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import type { FormItemRule } from 'element-plus'

// 弹窗显示状态
const addUserDialogVisible = ref(false)

// 表单引用
const userFormRef = ref<FormInstance>()

// 用户表单数据
const userForm = reactive({
  username: '',
  phone: '',
  email: '',
  age: undefined as number | undefined,
  gender: 0
})

// 表单验证规则
const validatePhone = (rule: FormItemRule, value: string, callback: any) => {
  if (!value) {
    callback(new Error('请输入手机号'))
  } else {
    const phoneReg = /^1[3-9]\d{9}$/
    if (!phoneReg.test(value)) {
      callback(new Error('请输入正确的手机号格式'))
    } else {
      callback()
    }
  }
}

const validateEmail = (rule: FormItemRule, value: string, callback: any) => {
  if (!value) {
    callback()
  } else {
    const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
    if (!emailReg.test(value)) {
      callback(new Error('请输入正确的邮箱格式'))
    } else {
      callback()
    }
  }
}

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度应在2-20个字符之间', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ],
  email: [
    { validator: validateEmail, trigger: 'blur' }
  ],
  age: [
    { type: 'number', message: '年龄必须为数字', trigger: 'change' },
    { type: 'number', min: 1, max: 120, message: '年龄必须在1-120之间', trigger: 'change' }
  ]
})

// 打开新增用户弹窗
const openAddUserDialog = () => {
  // 显示弹窗
  addUserDialogVisible.value = true
}

// 重置表单
const resetForm = () => {
  userFormRef.value?.resetFields()
}

// 关闭弹窗前的回调
const handleClose = (done: () => void) => {
  resetForm()
  done()
}

// 提交用户表单
const submitUserForm = () => {
  if (!userFormRef.value) return
  
  userFormRef.value.validate((valid) => {
    if (valid) {
      // 这里可以添加API调用，将用户数据提交到后端
      console.log('提交的用户数据:', userForm)
      
      // 提交成功后关闭弹窗
      ElMessage.success('添加用户成功')
      addUserDialogVisible.value = false
    } else {
      ElMessage.error('请正确填写表单信息')
      return false
    }
  })
}
</script>
  
  <style scoped lang="scss">
  .koko-demo-main {
    padding: 20px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
  
    h2 {
      color: #333;
      margin-bottom: 20px;
    }
  
    .overview-section {
      margin-bottom: 30px;
  
      .overview-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
  
        .card {
          background-color: #fff;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          text-align: center;
  
          h3 {
            color: #666;
            font-size: 16px;
            margin-bottom: 10px;
          }
  
          p {
            color: #333;
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
    }
  
    .quick-actions-section {
      margin-bottom: 30px;
  
      .action-buttons {
        display: flex;
        gap: 15px;
  
        .action-button {
          background-color: #3498db;
          color: #fff;
          border: none;
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          font-size: 14px;
          transition: background-color 0.3s;
  
          &:hover {
            background-color: #2980b9;
          }
        }
      }
    }
  
    .recent-activity-section {
      .activity-list {
        list-style-type: none;
        padding: 0;
  
        .activity-item {
          background-color: #fff;
          padding: 15px;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .activity-time {
            color: #666;
            font-size: 14px;
          }
  
          .activity-description {
            color: #333;
            font-size: 16px;
          }
        }
      }
    }
  }
  </style>